<template>
  <a-modal :visible="props.visible" :width="400" :ok-loading="submitLoading" title="输入管理员操作密码" :on-before-ok="handleOk"
    @cancel="handleCancel" title-align="start">
    <div>
      <a-space direction="vertical" style="width: 100%;">
        <a-input-password :defaultVisibility="true" v-model="deleteForm[props.pwdTxt]" placeholder="请输入管理员操作密码"
          allow-clean />
        <a-input v-if="props.show_google" v-model="deleteForm.google_code" placeholder="请输入谷歌验证码"></a-input>
      </a-space>

    </div>
  </a-modal>
</template>

<script setup>
import { ref, watch } from 'vue'
const emit = defineEmits(['ok', 'cancel'])
const submitLoading = ref(false)
import { Message } from '@arco-design/web-vue'
const deleteForm = ref({
  id: '',
  google_code: ''
})
const props = defineProps({
  visible: { type: Boolean, default: false },
  api: { type: Function, default: () => null },
  id: { type: [Number], default: null },
  successTxt: { type: String, default: '操作成功' },
  data: { type: Object, default: () => { } },
  pwdTxt: { type: String, default: 'pay_password' },
  show_google: { type: Boolean, default: false }
})
watch(props, (newV) => {
  console.log('new', newV)
  deleteForm.value[props.pwdTxt] = ''
  deleteForm.value.id = newV.id
})
const handleCancel = () => {
  emit('cancel')
}
const handleOk = async (done) => {

  if (deleteForm.value[props.pwdTxt]) {
    if (props.show_google && !deleteForm.value.google_code) {
      done(false)
      return Message.error('请输入谷歌验证码')
    }
    submitLoading.value = true
    try {
      let data = { ...deleteForm.value }
      if (!props.show_google) {
        delete data.google_code
      }
      console.log('data',data);
      const resp = await props.api(data)
      Message.success(props.successTxt)
      submitLoading.value = false
      emit('cancel')
      emit('ok')
      done(true)
      deleteForm.value.google_code = ''
      deleteForm.value[props.pwdTxt] = ''
    } catch {
      submitLoading.value = false
    }
  } else {
    Message.error('请输入操作密码')
  }
  done(false)

}
</script>